<template>
  <div class="chaoxing-cell">


    <van-cell>

      <van-popover placement="right"
                   v-model="showPopover"
                   style="float: left"
                   trigger="click"
                   :actions="actions"
                   @select="onSelect">
        <template #reference>
          <img class="img"
               alt="图片"
               :src="image">
        </template>
      </van-popover>

      <div class="name" v-if="className!=null">课程: {{ className }}</div>
      <div class="name class" v-if="courseName!=null">班级: {{ courseName }}</div>
      <div class="name teacher" v-if="teacherName!=null">老师: {{ teacherName }}</div>

      <template>
        <slot>{{ value }}</slot>
      </template>

      <template #right-icon>
        <i v-show="op===2" class="iconfont icon-cok"></i>
        <i v-show="op===0" class="iconfont icon-cwarning"></i>
      </template>

    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'ChaoXingCell',
  props: ['courseName', 'value', 'className', 'teacherName', 'image', 'op'],
  data() {
    return {
      showPopover: false,
      settingDisabled: true,
      actions: [  //addDis开启忽略
        {text: '开启', icon: 'passed', disabled: this.op === 2},
        {text: '关闭', icon: 'close', disabled: !(this.op === 2)},
        {text: '配置', icon: 'setting-o'}
      ]
    }
  },
  mounted() {
  },
  methods: {
    onSelect(action) {
      console.log(action.text)
      if (action.text === '开启') {
        action.disabled = !action.disabled;
        this.actions[1].disabled = !action.disabled;
        // this.actions[2].disabled = action.disabled;
        this.$emit('openClick')
      }
      if (action.text === '关闭') {
        action.disabled = !action.disabled;
        this.actions[0].disabled = !action.disabled;
        // this.actions[2].disabled = !action.disabled;
        this.$emit('closeClick')
      }
      if (action.text === '配置') {
        this.$emit('goSetting')
      }
    }
  }
}
</script>

<style lang="less">
.chaoxing-cell {
  .van-cell {
    height: 112.5px;
    line-height: 24px;
    font-size: 10px;
    margin: 10px 0 0 0;
    border-radius: 20px;

    .name {
      text-align: center;
    }

    .iconfont.icon-cok {
      margin: auto;
      color: @success-color;
    }

    .iconfont.icon-cwarning {
      margin: auto;
      color: @warn-color;
    }

    .name.class {
      font-size: 5px;
    }

    .name.teacher {
      font-size: 5px;
    }

  }

  .img {
    float: left;
    border-radius: 10px;
    width: 3.83rem;
    height: 2.4rem;
  }

  .iconfont.right-icon {
    margin: auto 1px auto auto;
  }

  .van-switch {
    margin: auto;
  }

}
</style>